<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="app">
		<compa></compa>
		<compb></compb>
		<compC></compC>
		
	</div>
	<template id="compb">
		<div>
			<h1>我是compa组件</h1>
			<p>{{msg}}</p>
			<button @click="run()">弹框</button>
		</div>
	</template>
	<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	//全局组件，驼峰命名法可以,横杠命名也可以
	//局部组件，使用时候必须是全小写
	//根组件使用的时候：驼峰式命名要改成横杠式命名，组件名和注册名可以使用驼峰命名
	//在某个组件中使用自定义标记使组件，这个时候可以使用驼峰命名
	/*
		组件嵌套：全局组件：组件嵌套的时候，可以比较随意
					局部组件：注册组件的过程，要在想要嵌套的组件李注册
	*/
		Vue.component('compC',{
			template:`
				<div>
					<h1>我是compc组件</h1>
					<p>{{msg}}</p>
					<button @click="run()">弹框</button>
				</div>
			`,
			data(){
				return{
					msg:'我是compc组件的数据'
				}
			},
			methods:{
				run(){
					alert('我是compc组件run方法')
				}
			}
		})
	
		Vue.component('compa',{//创建组件+注册组件
			template:`
				<div>
					<h1>我是compa组件</h1>
					<p>{{msg}}</p>
					<button @click="run()">弹框</button>
					<compC></compC>
				</div>
			`,
			data(){
				return{
					msg:'我是compa组件的数据'
				}
			},
			methods:{
				run(){
					alert('我是compa组件run方法')
				}
			}
		})
		let compB = {
			template:`
				<div>
					<h1>我是compb组件</h1>
					<p>{{msg}}</p>
					<button@click="run()">弹框</button>
				</div>
			`,
			data(){
				return{
					msg:'我是compb组件的数据'
				}
			},
			methods:{
				run(){
					alert('我是compb组件run方法')
				}
			}
		}
		let myApp = new Vue({
			el:'#app',
			data:{},
			components:{
				compB
			}
			
		})
	</script>
</body>
</html>